<!doctype html>

<html>
 
<head>
<meta charset="utf-8">
<title>日历</title>
</head>
<style type="text/css">
    
    #oContainer { 
    	          position: absolute;
    	          top: 200px;
    	          left: 800px; 
                  width: 270px; 
                  padding: 1px; 
                  font-family: '楷体';
                  background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1825747671,754017346&fm=26&gp=0.jpg);
                  border-left: buttonhighlight 2px solid; 
                  border-top: buttonhighlight 2px solid; 
                  border-right: buttonshadow 1px solid; 
                  border-bottom: buttonshadow 4px solid; 
    }
    .DateTable { 
                  font: 10pt; 
                  word-break: break-all; 
    }
    .WeekTd, .BlankTd { 
                  font: 12pt; 
                  border: 1px solid menu; 
    }
    .Today {     cursor: pointer;
                  font: 20pt; 
                  color: blue; 
                  cursor: hand; 
                  position: relative; 
                  left: 1px; 
                  top: 1px; 
                  border-left: 1px solid dimgray; 
                  border-top: 1px solid dimgray; 
                  border-right: 1px solid white; 
                  border-bottom: 1px solid white; 
    }
    .MonthTd { 
                  font: 10pt; 
                  font-family: webdings; 
                  cursor: hand; 
                  border: 1px solid menu; 
            
    }
    .SelectTd { 
                  border: 1px solid menu; 
    }
    .over {        cursor: pointer;
                  position: relative; 
                  cursor: hand; 
                  border-right: 1px solid buttonshadow; 
                  border-bottom: 1px solid buttonshadow; 
                  border-left: 1px solid buttonhighlight; 
                  border-top: 1px solid buttonhighlight; 
    }
    .out { 
                  border-left: 1px solid buttonface; 
                  border-top: 1px solid buttonface; 
                  border-right: 1px solid buttonface; 
                  border-bottom: 1px solid buttonface; 
    }
    .down {     
                  position: relative; 
                  left: 1px; 
                  top: 1px; 
                  border-left: 1px solid dimgray; 
                  border-top: 1px solid dimgray; 
                  border-right: 1px solid white; 
                  border-bottom: 1px solid white; 
    }
</style>
<script language="javascript">
    var oDate = new Object();
    function DateClass(_container) {
       
        this.container = _container;
        this.weekArr = ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'];
        this.dateArr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

        this.showTable = function(_year, _month) {
             this.container.innerHTML = this.getDateTable(_year, _month);
        }

        this.getDateTable = function(_year, _month) {
             if (this.checkArgs(_year, _month)) {
                 _year = parseInt(this.checkDate(_year, _month).split('-')[0]);
                 _month = parseInt(this.checkDate(_year, _month).split('-')[1]);
                 this.Thead = '<table cellpadding="5" cellspacing="0" class="DateTable">\n';
                  //左边的控件，可以点击之后激活月份减1，也就是上一个月。
                 this.Thead += '<tr><td align="center" class="MonthTd" onclick="oDate.showTable(' + _year + ', ' + eval(_month-1) + ');">3</td>';
                  //下拉年份的选择器
                 this.Thead += '<td align="center" colspan="5" class="SelectTd"><select onchange="oDate.showTable(options[selectedIndex].value, ' + _month + ');">';
                 for (var i=1900; i<2101; i++) this.Thead += '<option value="' + i + '" ' + ((_year==i) ? 'selected' : '') + '>' + i + '年</option>';
                 this.Thead += '</select><select onchange="oDate.showTable(' + _year + ', options[selectedIndex].value);">';
                 //下拉月份的选择器。
                 for (var i=1; i<13; i++) this.Thead += '<option value="' + i + '" ' + ((_month==i) ? 'selected' : '') + '>' + i + '月</option>';
                 this.Thead += '</select></td>';
                 //右边控件，点击激活事件，月份加1，跳入下一个月。
                 this.Thead += '<td align="center" class="MonthTd" onclick="oDate.showTable(' + _year + ', ' + eval(_month+1) + ');">4</td></tr>\n';
                 //显示一周七天的间隔
                 this.Thead += '<tr>';
                 for (var i=0; i<this.weekArr.length; i++) this.Thead += '<td align="center" class="WeekTd">' + this.weekArr[i] + '</td>';
                 this.Thead += '</tr>\n';
                 this.Tbody = '<tr>';
                 //判断2月是否有29号
                 this.dateArr[1] = (!this.checkYear(_year)) ? 28 : 29 ;
                 //计算第一天的位置
                 for (var i=0; i<this.firstPos(_year, _month); i++) this.Tbody += '<td class="BlankTd"></td>';
                //设定日历上的排列以及鼠标移动的光标变换
                 for (var i=1; i<=this.dateArr[_month-1]; i++) {
                      if (this.firstPos(_year, _month) == 0) {
                          if (i!=1 && i%7==1) this.Tbody += '</tr>\n<tr>';
                      } else {
                          if ((i+this.firstPos(_year, _month))%7==1) this.Tbody += '</tr>\n<tr>';
                      }
                      if (!this.today(_year, _month, i)) {
                          this.Tbody += '<td align="center" class="out" onmouseover="className=\'over\';" onmouseout="className=\'out\';" onmousedown="className=\'down\';" onclick="oDate.showDateStr(' + _year + ', ' + _month + ', ' + i + ', \'' + this.weekArr[new Date(_year, _month-1, i).getDay()] + '\');">' + i + '</td>';
                      } else {
                         this.Tbody += '<td align="center" class="Today" onclick="oDate.showDateStr(' + _year + ', ' + _month + ', ' + i + ', \'' + this.weekArr[new Date(_year, _month-1, i).getDay()] + '\');">' + i + '</td>'; 
                      } 
                 }
                 for (var i=0; i<6-this.lastPos(_year, _month); i++) this.Tbody += '<td class="BlankTd"></td>';
                 this.Tbody += '</tr>\n'; 
                 this.TFoot = '</table>\n';
                 this.Table = this.Thead + this.Tbody + this.TFoot;
                 return this.Table;
             } else {
                 return 'Arguments Error!';
             }            
         }
         //设置第一个位置
         this.firstPos = function(_year, _month) {
              return new Date(_year, _month-1, 1).getDay();
         }
         //设置最后一个位置
         this.lastPos = function(_year, _month) {
              return new Date(_year, _month-1, this.dateArr[_month-1]).getDay();
         }
        //检查年份是否为闰年
         this.checkYear = function(_year) {
              return ((_year % 4 == 0) && (_year % 100 != 0)) || (_year % 400 == 0);
         }
         //设置今天的日期
         this.today = function(_year, _month, _date) {
              return (new Date().getFullYear() == _year) && (new Date().getMonth() == _month-1) && (new Date().getDate() == _date);
         }
         //设定年份和月份的范围
         this.checkArgs = function(_year, _month) {
              if (_year<1900 || _year>2100) return false;
              if (_month<0 || _month>13) return false;
              return (!isNaN(_year) && !isNaN(_month));           
         }
         //检查日期的正确性
         this.checkDate = function(_year, _month) {
              if (_month<1) { 
                  _year --;
                  _month = 12;
              }
              if (_month>12) { 
                  _year ++;
                  _month = 1;
              }
              return _year + '-' + _month;
         } 
        //设置事件，创建窗口显示相关信息
         this.showDateStr = function(_year, _month, _date, _week) {
              window.alert(_year + '.' + _month + '.' + _date + ' ' + _week);  
         }
    }
   //读取相应的年份月份和日期等信息
    window.onload = function() {
         oDate = new DateClass(self.oContainer);
         oDate.showTable(new Date().getFullYear(), new Date().getMonth()+1);
    }
</script>
<div id="oContainer"></div>
</html>